<template>
    <Layout>
        <!-- 页面标题和操作栏 -->
        <div class="bg-white border-b border-neutral-medium/30 p-4 md:p-6">
            <div class="flex flex-col md:flex-row md:items-center md:justify-between">
                <div>
                    <h2 class="text-[clamp(1.25rem,3vw,1.75rem)] font-bold">争议案件管理</h2>
                    <p class="text-neutral text-sm mt-1">处理和管理所有争议案件</p>
                </div>

                <div class="flex items-center space-x-3 mt-4 md:mt-0">
                    <div class="relative">
                        <input type="text" placeholder="搜索案件编号或关键词..."
                            class="pl-10 pr-4 py-2 border border-neutral-medium/30 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary text-sm w-full md:w-64">
                        <i class="fa fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-neutral"></i>
                    </div>

                    <button
                        class="bg-primary hover:bg-primary/90 text-white px-4 py-2 rounded-lg transition-colors flex items-center space-x-2"
                        @click="createNewCase">
                        <i class="fa fa-plus"></i>
                        <span>新建案件</span>
                    </button>
                </div>
            </div>
        </div>

        <!-- 统计卡片 -->
        <CaseStats />

        <!-- 案件列表 -->
        <div class="flex-1 overflow-y-auto p-4 md:p-6 scrollbar-thin">
            <div class="bg-white rounded-xl shadow-sm overflow-hidden">
                <!-- 筛选和操作 -->
                <CaseFilter />

                <!-- 案件表格 -->
                <CaseTable />

                <!-- 分页 -->
                <Pagination />
            </div>
        </div>
    </Layout>
</template>

<script setup lang="ts">
import Layout from '@/components/layout/Layout.vue'
import CaseStats from '@/components/cases/CaseStats.vue'
import CaseFilter from '@/components/cases/CaseFilter.vue'
import CaseTable from '@/components/cases/CaseTable.vue'
import Pagination from '@/components/common/Pagination.vue'

const createNewCase = () => {
    alert('在实际应用中，这里会打开新建案件表单')
}
</script>
